<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="img/logo.jpg" type="image/x-icon" />
    <link rel="Shortcut Icon" href="img/logo.jpg" type="image/x-icon" />
    <title>知我隧道</title>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/simpleTab.css">
</head>

<body>
    <div class="layui-header header header-doc">
        <div class="layui-container">

            <a href="index.html" class="logo">
                <img src="img/logo.jpg">
                <span>知我隧道</span>
            </a>
            <ul class="layui-nav my-nav">
                <li class="layui-nav-item"><a href="index.html">主页</a></li>

                <li class="layui-nav-item">
                    <a href="javascript:;">项目</a>
                    <dl class="layui-nav-child">
                        <dd><a href="wechat-applet.html">校园生活社区</a></dd>
                        <dd><a href="seckill.html">商城秒杀系统</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-this">
                    <a href="byMe.html">本站</a>
                </li>
                <li class="layui-nav-item">
                    <a href="byAuthor.html">作者</a>
                </li>
                <li class="layui-nav-item">
                    <a href="love.html" target="_blank">彩蛋</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="my-content main">
        <div class="layui-panel sidebar">
            <ul class="layui-menu" id="docDemoMenu1">
                <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
                    <div class="layui-menu-body-title">
                        关于本站 <i class="layui-icon layui-icon-up"></i>
                    </div>
                    <ul class="tabBody">
                        <li class="layui-menu-item-checked">
                            <div class="layui-menu-body-title">项目简介</div>
                        </li>
                    </ul>
                </li>
                <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
                    <div class="layui-menu-body-title">
                        代码片段 <i class="layui-icon layui-icon-up"></i>
                    </div>
                    <ul class="tabBody">
                        <li>
                            <div class="layui-menu-body-title">图片放大</div>
                        </li>
                        <li>
                            <div class="layui-menu-body-title">二级选项卡</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="layui-card rightbox">
            <div class="doc" style="display: block;">
                <div class="layui-card-header title">
                    关于本站
                </div>
                <ul class="layui-card-body content">
                    <h3>
                        <img src="img/rightArrow.svg" class="rightArrow" alt="">
                        项目简介
                    </h3>
                    <li>本站为作者学生时期网页大作业，并已部署到服务器作为个人主页。</li>
                    <li>记录着作者在大学的点点滴滴，从一个懵懵懂懂到有所了解的过程。</li>
                </ul>
                <ul class="layui-card-body content">
                    <h3>
                        <img src="img/rightArrow.svg" class="rightArrow" alt="">
                        项目架构
                    </h3>
                    <li>采用 jQuery + LayUI 开发</li>
                    <li>有简单的动效以及一些内嵌网页</li>
                    <li>首页链接直接链接了作者的社区个人主页</li>
                </ul>
                <ul class="layui-card-body content">
                    <h3>
                        <img src="img/rightArrow.svg" class="rightArrow" alt="">
                        技术难点
                    </h3>
                    <li>网页内嵌</li>
                    <li>点击图片放大</li>
                    <li>点击瞬间动效</li>
                    <li>二级菜单事件绑定</li>
                </ul>
                <ul class="layui-card-body content">
                    <h3>
                        <img src="img/rightArrow.svg" class="rightArrow" alt="">
                        制作感想
                    </h3>
                    <li>本站为作者学生时期网页大作业，并已部署到服务器作为个人主页。</li>
                    <li>记录着作者在大学的点点滴滴，从一个懵懵懂懂到有所了解的过程。</li>
                </ul>
            </div>
            <div class="doc">
                <div class="layui-card-header title">
                    图片放大
                </div>
                <div class="layui-card-body content">

                    <pre class="layui-code" lay-title="html" lay-height="" lay-skin="" lay-encode="true">
<div class="layui-card-body content imgBox">
    <div><img src="" lay-src="img\doc_01.jpg" /></div>
    <div><img src="" lay-src="img\doc_02.jpg" /></div>
    <div><img src="" lay-src="img\doc_03.jpg" /></div>
    <div><img src="" lay-src="img\doc_04.jpg" /></div>
    <div><img src="" lay-src="img\doc_05.jpg" /></div>
    <div><img src="" lay-src="img\doc_06.jpg" /></div>
</div></pre>

                    <pre class="layui-code" lay-title="JavaScript" lay-height="" lay-skin="" lay-encode="true">
//开启懒加载
layui.use('flow', function () {
    var flow = layui.flow;
    //当你执行这样一个方法时，即对页面中的全部带有 lay-src 的 img 元素开启了懒加载（当然你也可以指定相关 img）
    flow.lazyimg();
});
$(() => {
    //点击事件
    $('.imgBox div').click(function () {
        //获取被点击图片的src
        let src = $(this).children('img').attr('src');
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['auto', '90%'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            //插入的内容，这里直接强制插入了一个img标签
            content: '<img src=' + src + ' style="height: 100%;" />'
        });
    })
})</pre>

                </div>
            </div>
            <div class="doc">
                <div class="layui-card-header title">
                    二级选项卡
                </div>
                <div class="layui-card-body content">

                    <pre class="layui-code" lay-title="html" lay-height="" lay-skin="" lay-encode="true">
<!-- 二级选项卡菜单 -->
<div class="layui-panel sidebar">
    <ul class="layui-menu" id="docDemoMenu1">
        <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
            <div class="layui-menu-body-title">
                我是一级菜单1号 <i class="layui-icon layui-icon-up"></i>
            </div>
            <ul class="tabBody">
                <li class="layui-menu-item-checked">
                    <div class="layui-menu-body-title">我是二级菜单1号</div>
                </li>
            </ul>
        </li>
        <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}">
            <div class="layui-menu-body-title">
                我是一级菜单2号 <i class="layui-icon layui-icon-up"></i>
            </div>
            <ul class="tabBody">
                <li>
                    <div class="layui-menu-body-title">我是二级菜单1号</div>
                </li>
                <li>
                    <div class="layui-menu-body-title">我是二级菜单2号</div>
                </li>
            </ul>
        </li>
    </ul>
</div>
<!-- 选项卡内容，除第一个其他doc默认隐藏，通过菜单点击切换显示 -->
<div class="layui-card rightbox">
    <div class="doc" style="display: block;">
        我是一级菜单1号 + 我是二级菜单1号
    </div>
    <div class="doc" style="display: none;">
        我是一级菜单2号 + 我是二级菜单1号
    </div>
    <div class="doc" style="display: none;">
        我是一级菜单2号 + 我是二级菜单2号
    </div>
</div></pre>

                    <pre class="layui-code" lay-title="JavaScript" lay-height="" lay-skin="" lay-encode="true">
let num = 0;
//给每个二级菜单绑定点击事件
for (let i = 0; i < $('.tabBody').length; i++) {
    //闭包函数变量套现
    (function (j) {
        //当前循环的的一级菜单中所有二级
        $('.tabBody').eq(i).children('li').click(function () {
            //点击索引值，j为之前绑定过的个数
            let index = $(this).index() + j;
            $('.rightbox .doc').eq(index).fadeIn('fast', 'linear').siblings().fadeOut('fast', 'linear');
        })
    }(num))
    //每次绑定完的数量
    num += $('.tabBody').eq(i).children('li').length;
}</pre>

                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="my-content">
            <img src="img/weixin.jpg" alt="">
            <div class="footer-text1">
                本站采用 jQuery + LayUI 开发，如有侵权请及时联系删除
            </div>
            <div class="footer-text2">
                作者：kongbai121 | 微信：ZhengBaiNian121
                <div  class="authorities">
                    备案号：<a href="https://beian.miit.gov.cn/">粤ICP备2021026161号-1</a>
                </div>
            </div>
            <div class="but">
                <a href="seckill.html" class="layui-btn layui-btn-primary layui-border-green but1">商品秒杀项目</a>
                <a href="wechat-applet.html" class="layui-btn layui-btn-primary layui-border-green">校园生活社区</a>
            </div>
        </div>
    </div>

    <!-- ================================================================================= -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="lib/layui/layui.js"></script>
    <script src="js/simpleTab.js"></script>
    <script>
        layui.use('code', function () { //加载code模块
            layui.code(); //引用code方法
        });
    </script>
</body>

</html>